<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content" style="margin-left: -12px">{{title}}</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0" orient="vertical">
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;padding-top: 7px" :span="1"><span style="color: red;">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><x-input title="收货人:" v-model="linkName" type="text" placeholder="请输入收货人"></x-input></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;padding-top: 7px" :span="1"><span style="color: red;">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><x-input title="手机号码:" v-model="linkTel" keyboard="number"  placeholder="请输入手机号码"></x-input></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;padding-top: 7px" :span="1"><span style="color: red;">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><popup-picker title="省份" @on-hide="getCity" placeholder="请选择省份" :data="ProvinceList" v-model="ProvinceValue"></popup-picker></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;padding-top: 7px" :span="1"><span style="color: red;">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><popup-picker title="城市" placeholder="请选择城市" :data="CityList" v-model="CityValue" @on-hide="getDistrict"></popup-picker></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group gutter="0">
            <flexbox :gutter="0">
              <flexbox-item style="padding-left: 5px;padding-top: 7px" :span="1"><span style="color: red;">*</span></flexbox-item>
              <flexbox-item style="margin-left: -30px;"><popup-picker title="地区" placeholder="请选择地区" :data="DistrictList" v-model="DistrictValue" @on-hide="subCityCodeFn"></popup-picker></flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <flexbox :gutter="0">
            <flexbox-item style="padding-left: 5px;" :span="1"><span style="color: red;display: block;margin-top: -27px;">*</span></flexbox-item>
            <flexbox-item style="margin-left: -30px;"><x-textarea :show-counter="false" v-model="address" :rows="3" ref="autosize" placeholder="请填写详细地址"></x-textarea></flexbox-item>
          </flexbox>
        </flexbox-item>
      </flexbox>
    </group>
    <div @click="setDefaultAdd" style="padding-left: 10px;width: 150px;">
      <div style="display: inline-block;">
        <img style="vertical-align: middle;" slot="icon" v-if="isDefault!==true" width="15" src="../../../../assets/images/user/icon_xz.png">
        <img style="vertical-align: middle;" slot="icon" v-if="isDefault===true" width="15" src="../../../../assets/images/user/icon_gouxuan.png">
      </div>
      <div style="display: inline-block;">
        <span v-if="isDefault!==true" style="vertical-align: middle;">设为默认地址</span>
        <span v-if="isDefault===true" style="color: #FF9900;vertical-align: middle;">默认地址</span>
      </div>
    </div>
    <x-button type="primary" style="margin: 30px auto 0 auto;color: #ff0000;background: white;border-radius: 0;font-size: 15px;" @click.native="deleteAddressFn">删除地址</x-button>
    <x-button type="primary" style="margin: 20px auto 0 auto;color: white; background: #3d82e5;border-radius: 0;font-size: 15px;" @click.native="saveAddressFn">保存地址</x-button>
  </div>
</template>

<script>
  import { Group, Cell, XInput, PopupPicker, Picker, XButton, XTextarea, Checklist, Flexbox, FlexboxItem, Alert } from 'vux'
  import Autosize from 'autosize'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      PopupPicker,
      Group,
      Picker,
      XButton,
      Cell,
      XInput,
      XTextarea,
      Checklist,
      Flexbox,
      FlexboxItem,
      Alert,
      YqHeader
    },
    beforeDestroy () {
      Autosize.destroy(this.$refs.autosize.$refs.textarea)
    },
    data () {
      return {
        title: '编辑地址',
        Province: '省份',
        City: '城市',
        District: '地区',
        ProvinceValue: [],
        CityValue: [],
        DistrictValue: [],
        showName: false,
        ProvinceList: [['四川', '云南', '北京']],
        proCodeList: [],
        proCode: '',
        CityList: [['成都', '内江', '自贡']],
        cityCodelist: [],
        DistrictList: [['武侯区', '高新区', '锦江区']],
        DistrictCodeList: [],
        checklist001: [],
        commonList: ['设为默认地址'],
        isDefault: false,
        linkName: '',
        linkTel: '',
        cityCode: '',
        address: '',
        subCityCode: '',
        show: false,
        message: ''
      }
    },
    methods: {
      onHide () {
        if (this.message === '收货地址修改成功' || this.message === '地址删除成功') {
          this.$router.push({
            path: '/UserAddress'
          })
          this.$router.go(1)
        }
      },
      onShow () {
      },
      setDefaultAdd () {
        if (this.isDefault === false) {
          this.isDefault = true
        } else {
          this.isDefault = false
        }
      },
      getProFn () {
        let that = this
        that.http(urls.usersAddressGetPro, {subCityCode: null}, function (res) {
          if (res.status === 100) {
            that.ProvinceList = []
            let list = []
            res.data.citys.forEach(function (item) {
              list.push(item.cityName)
              let proCodeList = {
                name: item.cityName,
                value: item.cityCode
              }
              that.proCodeList.push(proCodeList)
            })
            that.ProvinceList.push(list)
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      getCity () {
        this.CityValue = []
        this.DistrictValue = []
        let that = this
        that.proCodeList.forEach(function (proCode) {
          if (that.ProvinceValue[0] === proCode.name) {
            that.proCode = proCode.value
          }
        })
        that.http(urls.usersAddressGetPro, {subCityCode: that.proCode}, function (res) {
          if (res.status === 100) {
            that.CityList = []
            let list = []
            res.data.citys.forEach(function (item) {
              list.push(item.cityName)
              let cityCodelist = {
                name: item.cityName,
                value: item.cityCode
              }
              that.cityCodelist.push(cityCodelist)
            })
            that.CityList.push(list)
          } else {
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      getDistrict () {
        let that = this
        that.cityCodelist.forEach(function (cityCode) {
          if (that.CityValue[0] === cityCode.name) {
            that.http(urls.usersAddressGetPro, {subCityCode: cityCode.value}, function (res) {
              if (res.status === 100) {
                that.DistrictList = []
                let list = []
                res.data.citys.forEach(function (item) {
                  list.push(item.cityName)
                  let DistrictCodeList = {
                    name: item.cityName,
                    value: item.cityCode
                  }
                  that.DistrictCodeList.push(DistrictCodeList)
                })
                that.DistrictList.push(list)
              } else {
              }
            }, function (res) {
              that.show = true
              that.message = res.errMsg
            })
          }
        })
      },
      subCityCodeFn () {
        let that = this
        that.DistrictCodeList.forEach(function (proCode) {
          if (that.DistrictValue[0] === proCode.name) {
            that.subCityCode = proCode.value
          }
        })
      },
      saveAddressFn () {
        if (this.linkName === null || this.linkName === '' || this.linkName === undefined ||
          this.linkTel === null || this.linkTel === '' || this.linkTel === undefined ||
          this.address === null || this.address === '' || this.address === undefined ||
          this.subCityCode === null || this.subCityCode === '' || this.subCityCode === undefined) {
          this.show = true
          this.message = '收货信息不完整，请检查后提交'
          return
        }
        let customerId = window.sessionStorage.getItem('userId')
        let id = this.$store.state.userAddress.id
        let that = this
        that.http(urls.usersAddressUpdate, {id: id, customerId: customerId, cityCode: that.subCityCode, address: that.address, linkName: that.linkName, linkTel: that.linkTel, isDefault: that.isDefault}, function (res) {
          if (res.status === 100) {
            that.show = true
            that.message = '收货地址修改成功'
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      getAddressDetail () {
        let id = this.$store.state.userAddress.id
        let that = this
        that.http(urls.usersAddressEdit, {id: id}, function (res) {
          if (res.status === 100) {
            that.subCityCode = res.data.address.cityCode
            that.linkName = res.data.address.linkName
            that.linkTel = res.data.address.linkTel
            that.address = res.data.address.address
            that.ProvinceValue = [res.data.address.pro]
            that.CityValue = [res.data.address.city]
            that.DistrictValue = [res.data.address.area]
            that.isDefault = res.data.address.isDefault
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      deleteAddressFn () {
        let that = this
        that.$vux.confirm.show({
          title: '提示',
          content: '确定删除该地址？',
          confirmText: '确定',
          onConfirm () {
            let id = that.$store.state.userAddress.id
            that.http(urls.usersAddressDel, {id: id}, function (res) {
              if (res.status === 100) {
                that.show = true
                that.message = '地址删除成功'
              } else {
                that.show = true
                that.message = res.errMsg
              }
            }, function (res) {
              that.show = true
              that.message = res.errMsg
            })
          }
        })
      },
      weixinfn29 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted () {
      this.getProFn()
      this.getAddressDetail()
      this.weixinfn29()
      Autosize(this.$refs.autosize.$refs.textarea)
    }
  }
</script>

<style scoped="scoped">
  .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before{
    color: #FF9900 !important;
  }
  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }
  .weui_btn:after{
    border: none;
  }
</style>
